<template>
	<view class="container container17782">
		<view class="flex diygw-col-24 swiper-clz">
			<swiper class="swiper" indicator-color="rgba(51, 51, 51, 0.39)" indicator-active-color="#fff" indicator-dots="true" autoplay interval="3000" circular="true" style="height: 150px">
				<swiper-item class="diygw-swiper-item">
					<view class="diygw-swiper-item-wrap">
						<image src="/static/pic1.jpg" class="diygw-swiper-image"></image>
						<view class="diygw-swiper-item-title"> 滑块一 </view>
					</view>
				</swiper-item>
				<swiper-item class="diygw-swiper-item">
					<view class="diygw-swiper-item-wrap">
						<image src="/static/pic2.jpg" class="diygw-swiper-image"></image>
						<view class="diygw-swiper-item-title"> 滑块二 </view>
					</view>
				</swiper-item>
				<swiper-item class="diygw-swiper-item">
					<view class="diygw-swiper-item-wrap">
						<image src="/static/pic3.jpg" class="diygw-swiper-image"></image>
						<view class="diygw-swiper-item-title"> 滑块三 </view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="flex diygw-col-24 list-clz">
			<view class="diygw-list">
				<view style="" class="diygw-item col-50 row solid-bottom list-item-clz">
					<view class="diygw-avatar list-icon-clz">
						<image mode="aspectFit" class="diygw-avatar-img" src="/static/icon2_ds.png"></image>
						<view class="diygw-tag badge empty list-badge-0 red"></view>
					</view>
					<view class="content">
						<view class="title"> 新闻公告 </view>
						<view style="color: #a4a4a4" class="text-sm remark"> NEWS&amp;NOTICE </view>
					</view>
				</view>
				<view style="" class="diygw-item col-50 row solid-bottom list-item-clz">
					<view class="diygw-avatar list-icon-clz">
						<image mode="aspectFit" class="diygw-avatar-img" src="/static/icon2_yj.png"></image>
					</view>
					<view class="content">
						<view class="title"> 我的邮件 </view>
						<view style="color: #a4a4a4" class="text-sm remark"> EMAIL </view>
					</view>
				</view>
				<view style="" class="diygw-item col-50 row solid-bottom list-item-clz">
					<view class="diygw-avatar list-icon-clz">
						<image mode="aspectFit" class="diygw-avatar-img" src="/static/icon2_tx.png"></image>
					</view>
					<view class="content">
						<view class="title"> 我的流程 </view>
						<view style="color: #a4a4a4" class="text-sm remark"> PROCESS </view>
					</view>
				</view>
				<view style="" class="diygw-item col-50 row solid-bottom list-item-clz">
					<view class="diygw-avatar list-icon-clz">
						<image mode="aspectFit" class="diygw-avatar-img" src="/static/icon2_gd.png"></image>
						<view class="diygw-tag badge list-badge-3 red"> 1 </view>
					</view>
					<view class="content">
						<view class="title"> 我的收文 </view>
						<view style="color: #a4a4a4" class="text-sm remark"> PROCESS </view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex5-clz">
			<view class="diygw-title flex diygw-col-24 title-clz">
				<view class="title font-normal"> 协同办公 </view>
				<view class="more">
					更多
					<text class="diy-icon-right"></text>
				</view>
			</view>
			<view class="flex diygw-col-24">
				<view class="diygw-grid col-4">
					<view class="diygw-grid-item">
						<view class="diygw-grid-inner grid-item-clz">
							<view style="margin-bottom: 5px" class="diygw-grid-icon diygw-avatar grid-icon-clz diy-icon-text"> </view>
							<view class="diygw-grid-title"> 待办流程 </view>
						</view>
					</view>
					<view class="diygw-grid-item">
						<view class="diygw-grid-inner grid-item-clz">
							<view style="margin-bottom: 5px" class="diygw-grid-icon diygw-avatar grid-icon-clz diy-icon-activityfill"> </view>
							<view class="diygw-grid-title"> 经办流程 </view>
						</view>
					</view>
					<view class="diygw-grid-item">
						<view class="diygw-grid-inner grid-item-clz">
							<view style="margin-bottom: 5px" class="diygw-grid-icon diygw-avatar grid-icon-clz diy-icon-post"> </view>
							<view class="diygw-grid-title"> 启动流程 </view>
						</view>
					</view>
					<view class="diygw-grid-item">
						<view class="diygw-grid-inner grid-item-clz">
							<view style="margin-bottom: 5px" class="diygw-grid-icon diygw-avatar grid-icon-clz diy-icon-mail"> </view>
							<view class="diygw-grid-title"> 发邮件 </view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex-clz">
			<view class="diygw-title flex diygw-col-24 title1-clz">
				<view class="title font-normal"> 公司新闻 </view>
				<view class="more">
					更多
					<text class="diy-icon-right"></text>
				</view>
			</view>
			<view class="flex flex-wrap diygw-col-24 items-stretch flex2-clz">
				<image src="/static/kt.png" class="diygw-image diygw-col-0 image3-clz" style="height: 90px !important; width: 90px" mode="widthFix"></image>
				<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-between items-start flex3-clz">
					<view class="diygw-col-24 text-clz"> DIYGW可视化内部培训通知 </view>
					<view class="diygw-col-24"> DIYGW可视化内部培训通知DIYGW可视化内部培训通知DIYGW可视化内部培训通知DIYGW可视化内部培训通知DIYGW可视化内部培训通知 </view>
				</view>
			</view>
			<view class="flex flex-wrap diygw-col-24 items-stretch flex1-clz">
				<image src="/static/1.png" class="diygw-image diygw-col-0 image-clz" style="height: 90px !important; width: 90px" mode="widthFix"></image>
				<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-between items-start flex4-clz">
					<view class="diygw-col-24 text2-clz"> DIYGW可视化内部培训通知 </view>
					<view class="diygw-col-24"> DIYGW可视化内部培训通知DIYGW可视化内部培训通知DIYGW可视化内部培训通知DIYGW可视化内部培训通知DIYGW可视化内部培训通知 </view>
				</view>
			</view>
			<view class="flex flex-wrap diygw-col-24 items-stretch flex6-clz">
				<image src="/static/3.png" class="diygw-image diygw-col-0 image1-clz" style="height: 90px !important; width: 90px" mode="widthFix"></image>
				<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-around items-start flex7-clz">
					<view class="diygw-col-24 text4-clz"> DIYGW可视化内部培训通知 </view>
					<view class="diygw-col-24"> DIYGW可视化内部培训通知DIYGW可视化内部培训通知DIYGW可视化内部培训通知DIYGW可视化内部培训通知DIYGW可视化内部培训通知 </view>
				</view>
			</view>
		</view>
		<view class="flex diygw-col-24 diygw-bottom olive bar4-clz">
			<view class="diygw-grid diygw-actions">
				<button @tap="navigateTo" data-type="page" data-url="/pages/Home" class="diygw-action addon">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-home" style="color: #ffffff"> </view>
						<view class="diygw-grid-title"> 首页 </view>
					</view>
				</button>
				<button @tap="navigateTo" data-type="page" data-url="/pages/data" class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-discover" style="color: #ffffff"> </view>
						<view class="diygw-grid-title"> 数据信息 </view>
					</view>
				</button>
				<button @tap="navigateTo" data-type="page" data-url="/pages/vip" class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-people" style="color: #ffffff"> </view>
						<view class="diygw-grid-title"> 用户中心 </view>
					</view>
				</button>
			</view>
		</view>
		<view class="version text-grey flex-direction-column flex diygw-col-24 justify-center align-center">
			<view> DIY官网代码生成器生成 </view>
			<view> http://www.diygw.com </view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {}
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {}
		}
	};
</script>

<style lang="scss" scoped>
	.swiper-clz {
		margin-left: 10px;
		border-bottom-left-radius: 8px;
		overflow: hidden;
		width: calc(100% - 10px - 10px) !important;
		border-top-left-radius: 8px;
		margin-top: 10px;
		border-top-right-radius: 8px;
		border-bottom-right-radius: 8px;
		margin-bottom: 10px;
		margin-right: 10px;
	}
	.list-clz {
		margin-left: 10px;
		border: 1px solid #424244;
		border-bottom-left-radius: 8px;
		box-shadow: 0px 1px 3px 1px rgba(68, 68, 68, 0.16) inset;
		overflow: hidden;
		width: calc(100% - 10px - 10px) !important;
		border-top-left-radius: 8px;
		margin-top: 10px;
		border-top-right-radius: 8px;
		border-bottom-right-radius: 8px;
		margin-bottom: 10px;
		margin-right: 10px;
	}
	.list-item-clz {
		margin: 0px;
		padding: 10px;
	}
	.list-item-clz .list-icon-clz {
		width: 40px;
		height: 40px;
		font-size: calc(40px - 4px) !important;
	}

	.list-badge-0 {
		padding-left: 0px;
		padding-right: 0px;
		right: 2px;
		top: 0px;
	}
	.list-badge-3 {
		padding-left: 0px;
		padding-right: 0px;
		right: -7px;
		top: -5px;
	}
	.flex5-clz {
		border: 1px solid #424244;
		border-bottom-left-radius: 8px;
		z-index: 100;
		border-top-right-radius: 8px;
		margin-right: 10px;
		margin-left: 10px;
		box-shadow: 0px 1px 3px 1px rgba(68, 68, 68, 0.16) inset;
		overflow: hidden;
		width: calc(100% - 10px - 10px) !important;
		border-top-left-radius: 8px;
		margin-top: 10px;
		border-bottom-right-radius: 8px;
		margin-bottom: 10px;
	}
	.title-clz {
		border-bottom: 1px solid #424244;
	}
	.grid-item-clz {
		font-size: 12px;
		margin: 0px;
		padding: 10px;
	}
	.grid-icon-clz {
		width: 30px;
		height: 30px;
		font-size: calc(30px - 4px) !important;
		color: #ffffff;
	}
	.flex-clz {
		border: 1px solid #424244;
		border-bottom-left-radius: 8px;
		z-index: 100;
		border-top-right-radius: 8px;
		margin-right: 10px;
		margin-left: 10px;
		box-shadow: 0px 1px 3px 1px rgba(68, 68, 68, 0.16) inset;
		overflow: hidden;
		width: calc(100% - 10px - 10px) !important;
		border-top-left-radius: 8px;
		margin-top: 10px;
		border-bottom-right-radius: 8px;
		margin-bottom: 10px;
	}
	.title1-clz {
		border-bottom: 1px solid #424244;
	}
	.flex2-clz {
		margin-left: 8px;
		padding-top: 0px;
		padding-left: 0px;
		width: calc(100% - 8px - 8px) !important;
		padding-bottom: 8px;
		margin-top: 8px;
		margin-bottom: 8px;
		border-bottom: 1px solid #424244;
		margin-right: 8px;
		padding-right: 0px;
	}
	.image3-clz {
		border-bottom-left-radius: 12px;
		overflow: hidden;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
		border-bottom-right-radius: 12px;
	}
	.flex3-clz {
		padding-top: 0px;
		flex: 1;
		padding-left: 5px;
		padding-bottom: 0px;
		padding-right: 0px;
	}
	.text-clz {
		font-weight: bold;
		font-size: 14px !important;
	}
	.flex1-clz {
		margin-left: 8px;
		padding-top: 0px;
		padding-left: 0px;
		width: calc(100% - 8px - 8px) !important;
		padding-bottom: 8px;
		margin-top: 8px;
		margin-bottom: 8px;
		border-bottom: 1px solid #424244;
		margin-right: 8px;
		padding-right: 0px;
	}
	.image-clz {
		border-bottom-left-radius: 12px;
		overflow: hidden;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
		border-bottom-right-radius: 12px;
	}
	.flex4-clz {
		padding-top: 0px;
		flex: 1;
		padding-left: 5px;
		padding-bottom: 0px;
		padding-right: 0px;
	}
	.text2-clz {
		font-weight: bold;
		font-size: 14px !important;
	}
	.flex6-clz {
		margin-left: 8px;
		padding-top: 0px;
		padding-left: 0px;
		width: calc(100% - 8px - 8px) !important;
		padding-bottom: 8px;
		margin-top: 8px;
		margin-bottom: 8px;
		border-bottom: 1px solid #424244;
		margin-right: 8px;
		padding-right: 0px;
	}
	.image1-clz {
		border-bottom-left-radius: 12px;
		overflow: hidden;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
		border-bottom-right-radius: 12px;
	}
	.flex7-clz {
		padding-top: 0px;
		flex: 1;
		padding-left: 5px;
		padding-bottom: 0px;
		padding-right: 0px;
	}
	.text4-clz {
		font-weight: bold;
		font-size: 14px !important;
	}
	.bar4-clz {
		color: #fefefe;
	}
	.container17782 {
		padding-left: 0px;
		padding-right: 0px;
		background-color: #1f1f1f;

		font-size: 12px;
		color: #ffffff;
	}
	.container17782 {
		padding-bottom: 80px;
	}
</style>
